<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">

    <link rel="stylesheet" href="{{ url_for('static',filename='css/order.css') }}">

    <link rel="shortcut icon" href="{{ url_for('static', filename='images/hhorder.png') }}">
    <link rel="stylesheet" href="https://unpkg.com/vant/lib/index.css">


    <title>和缓办公室预订</title>

</head>
<body>

<div>

    <div id="app">

        <van-nav-bar fixed z-index="10000" right-text="预订记录" @click-right="onClickHis" >
            <span v-cloak slot="title" @click="onClickOffice">{{selectOffice}}▾</span>
        </van-nav-bar>

        <div class="default-height"></div>

        <van-tabs v-model="active" @click="onClickWeek" type="card" color="#2a82e4" swipe-threshold="6">
          <van-tab v-for="week in list" :title="week.date + week.week"></van-tab>
        </van-tabs>

        <div class="info-tip" v-cloak>
            <span class="text_star"><span>*</span></span>
            <label class="text_tips">单击以点选时间段</label>
            <span class="centerGreen">可预约</span>
            <label class="centerTag">不可用</label>
        </div>

        <van-button v-cloak class="vans-default" v-bind:class="{ 'selected': time.isSelect, 'include': time.isInvalid}" v-bind:disabled="time.disable" v-for="time in timeSpan" type="default" plain @click="onClickTime(time)"><span class="order-info" v-if="time.isHeader">{{time.name}}</span>{{time.desc}}</van-button>

        <van-row>
          <van-col span="24" class="space-line"></van-col>
        </van-row>

        <van-row style="border: 2px solid #a6a6a6; border-radius: 5px; margin: 0 5px">
          <van-col span="18">
                          <van-cell-group>
          <van-field v-model="user_name" label="预约人" placeholder="请输入您的姓名" rows="1" maxlength="16" required></van-field>
          <van-field v-model="user_depart" label="组名" placeholder="请选择您所在的组" rows="1" maxlength="5" required center disabled>
              <van-button v-cloak slot="button" size="small" type="primary" @click="selectTag" plain>选择</van-button>
          </van-field>
          <van-field v-model="user_reason" label="用途" type="textarea" placeholder="请输入预订用途" rows="1" maxlength="40" autosize required clearable></van-field>
        </van-cell-group>

          </van-col>

            <van-col span="6">
                <van-button v-cloak @click="onDoOrder" class="btn-order">预订</van-button>
            </van-col>

        </van-row>

        <van-dialog v-cloak v-model="show_alert" show-cancel-button :before-close="beforeClose">
            <strong> <center style="color: #2a82e4;font-size: 20px;padding-top: 15px;padding-bottom: 10px">预约信息</center></strong>
            <center class="info-check">{{user_name}}</center>
            <center class="info-check">{{selectOffice}}</center>
            <center class="info-check">{{orderTime}}</center>
        </van-dialog>

        <van-actionsheet v-model="show" :actions="offices" @select="onSelectOffice" cancel-text="取消"/>


    </div>

</div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<script>
    var dataList = {{ weeks|tojson }};
    var timeSpan = {{ time_span|tojson }};
    var offices = {{ offices|tojson }};
    var groups = {{ groups|tojson }};
    var selectOffice = {{ select_office|tojson }};
    var selectWeek = 0;

    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};

    var app = new Vue({
        el: '#app',
        data() {
            return {
                list: dataList,
                timeSpan: timeSpan,
                ordering: false,
                active: 0,
                show: false,
                showTag: false,
                selectWeek: selectWeek,
                offices: offices,
                selectOffice: selectOffice,
                user_name: "",
                user_depart: "",
                user_reason: "",
                start_time: 0,
                end_time: 0,
                show_alert: false,
                show_pop: false
            };
        },
        created: function () {
            this.getOrdered();
        },
        computed: {
            // 计算属性的 getter
            orderTime: function () {

                var start = this.start_time - 7;
                if (this.start_time == 0) {
                    start = 6;
                }
                var end = this.end_time - 7;
                if (this.end_time == 0) {
                    end = 6;
                }
                return this.list[selectWeek]['date'] + ' 周' + this.list[selectWeek]['week'] + ' ' + this.timeSpan[start]['desc'] + '---' + this.timeSpan[end]['desc']
            }
        },
        methods: {
            onClickWeek(index) {
                this.selectWeek = index;
                this.getOrdered();
            },
            onClickHis() {
                window.location.href = $SCRIPT_ROOT + '/orderlist/';
            },
            onDoOrder() {
                if (app.start_time == 0) {
                    vant.Toast('请先选择时间段');
                    return
                }

                if (app.end_time == 0) {
                    app.end_time = app.start_time;
                }

                if (app.user_name == "") {
                    vant.Toast('请输入姓名');
                    return
                }

                if (app.user_depart =="") {
                    vant.Toast('请输入组名');
                    return
                }
                 if (app.user_reason =="") {
                    vant.Toast('请输入预订原因');
                    return
                }

                this.show_alert = true;
            },
            beforeClose(action, done) {
              if (action === 'confirm') {
                axios.get($SCRIPT_ROOT + '/submit/', {
                    params: {
                        user_name: app.user_name,
                        user_depart: app.user_depart,
                        reason: app.user_reason,
                        start_hour: app.start_time,
                        end_hour: app.end_time,
                        select_week: app.selectWeek,
                        office: selectOffice
                    }
                }).then(function (response) {
                    done();
                    if (response.data['status'] != 200) {
                        vant.Toast('预约出错：' + response.data['errorTip']);
                    } else {
                        app.user_name = "";
                        app.user_depart = "";
                        app.user_reason = "";
                        app.start_time = 0;
                        app.end_time = 0;
                        vant.Toast('预约成功');
                        app.show_pop = true;
                        app.getOrdered();

                    }

                });
              } else {
                done();
              }
            },
            onClickTime(time) {
                if (app.start_time == 0) {
                    app.start_time = time['number'];
                    time['isSelect'] = true;
                } else if (app.end_time == 0) {

                    if (app.start_time > time['number']) {
                        app.end_time = app.start_time;
                        app.start_time = time['number'];
                    } else {
                        app.end_time = time['number'];
                    }

                    axios.get($SCRIPT_ROOT + '/canSelect/', {
                        params: {
                            start: app.start_time,
                            end: app.end_time,
                            week: this.selectWeek,
                            office: this.selectOffice
                        }
                      }).then(function (response) {
                            // handle success
                            if (response.data['status'] != 200) {
                                vant.Toast('选中区间有不可用，请重试');
                            } else {
                                time['isSelect'] = true;
                                if (app.start_time == app.end_time) { return; }
                                for (var i = (app.start_time - 6); i < (app.end_time - 7); i++) {
                                    app.timeSpan[i]['isInvalid'] = true;
                                }
                            }
                    });
                } else {
                    app.start_time = time['number'];
                    app.end_time = 0;

                    for (aindex in this.timeSpan) {
                        this.timeSpan[aindex]['isInvalid'] = false;
                        this.timeSpan[aindex]['isSelect'] = false;
                    }
                    time['isSelect'] = true;
                }

            },
            onClickOffice() {
                this.offices = offices;
                this.show = true;
                this.showTag = false;
            },

            onSelectOffice(item) {
                this.show = false;
                if (this.showTag) {
                    this.user_depart = item.name;
                } else {
                    this.selectOffice = item.name;
                    this.getOrdered();
                }

            },
            selectTag() {
                this.offices = groups;
                this.showTag = true;
                this.show = true;
            },
            getOrdered() {
                axios.get($SCRIPT_ROOT + '/getOrdered/', {
                    params: {
                        office: this.selectOffice,
                        week: this.selectWeek,
                    }
                }).then(function (response) {
                    var ordered = response.data['data']['order'];
                    var allow = response.data['data']['allow'];
                    for (t in this.timeSpan) {
                        if (app.selectWeek != "0") {
                            this.timeSpan[t]['disable'] = false;
                        } else {
                            if (t <= allow) {
                                this.timeSpan[t]['disable'] = true;
                            }
                        }

                        this.timeSpan[t]['isHeader'] = false;
                        this.timeSpan[t]['isInvalid'] = false;
                        this.timeSpan[t]['isSelect'] = false;
                    }


                    for (let i = 0; i < ordered.length; i++) {
                        let from = ordered[i]['order_from'];
                        let to = ordered[i]['order_to'];
                        this.timeSpan[from - 7]['isHeader'] = true;
                        this.timeSpan[from - 7]['name'] = ordered[i]['user_name'];
                        for (let i = from - 7; i <= to - 7; i++) {
                            this.timeSpan[i]['disable'] = true;
                        }
                    }
                });
            }
        }
    })

</script>


</html>